import React, { Component } from 'react';
import styles from './index.module.scss'
import { Button, Grid, Modal } from 'antd-mobile'
import { Link } from 'react-router-dom'

import { BASE_URL } from '../../utils/url.js';
import { removeToken } from '../../utils/token';


// 菜单数据
const menus = [
    { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorate' },
    { id: 2, name: '我的出租', iconfont: 'icon-index', to: '/rent' },
    { id: 3, name: '看房记录', iconfont: 'icon-record', to: '/houselist' },
    {
        id: 4,
        name: '成为房主',
        iconfont: 'icon-identity',
        to: ''
    },
    { id: 5, name: '个人资料', iconfont: 'icon-myinfo', to: '' },
    { id: 6, name: '联系我们', iconfont: 'icon-cust', to: '' }
]

class My extends Component {
    constructor() {
        super()
        this.state = {
            myInfo: null
        }
    }
    // 挂载dom时执行
    componentDidMount() {
        this.getUserInfo()
    }
    // 获取用户信息
    getUserInfo = async () => {
        let res = await this.axios.get("/user")
        console.log(res, "返回用户信息")
        this.setState({
            myInfo: res.data.body
        })
    }
    // 退出登录
    logout = () => {
        Modal.alert('取消', '您确定退出吗', [
            { text: '取消', onPress: () => null},
            { text: '确定', onPress: async () => {
                let res = await this.axios.post("/user/logout")
                console.log(res,"退出返回信息")
                if(res.data.status == 200) {
                    removeToken()
                    this.setState({
                        myInfo: null
                    })
                }
            }},
          ]);
    }
    render() {
        const { myInfo } = this.state
        return (
            <div>
                <div className={styles.title}>
                    <img className={styles.bg} src="http://huangjiangjun.top:8088/img/profile/bg.png" alt="" />
                    <div className={styles.info}>
                        <div className={styles.myIcon}>
                            <img className={styles.avatar} src={myInfo ? `${BASE_URL}${myInfo.avatar}` : "http://huangjiangjun.top:8088/img/profile/avatar.png"} alt="" />
                        </div>
                        <div className={styles.user}>
                            <div className={styles.name}>{myInfo ? myInfo.nickname : "游客"}</div>
                            {myInfo ? (
                                <div>
                                    <div className={styles.auth}>
                                        <span onClick={this.logout}>退出</span>
                                    </div>
                                    <div className={styles.edit} onClick={() => this.props.history.push('/editData')}>
                                        编辑个人资料
                                        <div className={styles.arrow}>
                                            <i className="iconfont icon-arrow"></i>
                                        </div>
                                    </div>
                                </div>
                            ) : (

                                    <div className={styles.edit}>
                                        <Button onClick={() => { this.props.history.push("/login") }} type="primary" size="small" inline>去登录</Button>
                                    </div>
                                )

                            }
                        </div>
                    </div>
                </div>
                <Grid data={menus}
                    columnNum={3}
                    renderItem={dataItem => (
                        <Link to={dataItem.to}>
                            <div className={styles.menuItem}>
                                <i className={`iconfont ${dataItem.iconfont}`}></i>
                                <span>{dataItem.name}</span>
                            </div>
                        </Link>
                    )}
                />
                <div className={styles.ad}>
                    <img src="http://huangjiangjun.top:8088/img/profile/join.png" alt="" />
                </div>
            </div>
        );
    }
}

export default My;